<template>
	<view class="content">
		
		<image class="bg" src="/static/me_bg.png" mode=""></image>
		<image class="me_bg_light" src="/static/me_bg_light.png" mode=""></image>
		<view class="topTitle"  :style="{paddingTop:marginTop+'px'}">
			<u-icon name="arrow-left" class="icon" size="40rpx" color="#fff" @click="returnNav"></u-icon> <text class="text">开通会员</text>
		</view>
		<view class="vip_card">
			<image class="vip_card_bg" src="/static/vipCardBG.png" mode=""></image>
			<view class="top">			
				<view class="vip_title">
					<image src="/static/vipIcon.png" mode=""></image>
					<text>{{userData.member_zt==2?'VIP会员':'普通用户'}}</text>
				</view>
				<view class="time" v-if="userData.member_time">
					{{userData.member_time}} 到期
				</view>
			</view>
			<view class="vip_line">
				
			</view>
			
			<view class="user">
				<image :src="userData.pic" mode=""></image>
				<view class="text">
					<view class="name">
						{{userData.user}}
					</view>
					<view class="type">
						{{userData.member_zt==2?'VIP会员':'普通用户'}}
					</view>
				</view>
				
			<!-- 	<view class="btn"  @click="submit">
					{{userData.member_zt==2?'立即续费':'立即开通'}}
				</view> -->
			</view>
		</view>
	
	  <view class="rights">
	  	<view class="title">
	  		会员权益
	  	</view>
			
			<view class="rightsList">
				<view class="rightsItem" v-for="(item ,index) in powerList">
					<image :src="item.pic" mode=""></image>
					<view class="">
						{{item.title}}
					</view>
				</view>
			</view>
			
<!-- 			<view class="money">
				<text>{{vipData.title}}</text>
				<text>{{vipData.price}}￥</text>
			</view> -->
			
			<view class="btn" @click="submit">
				{{vipData.price}}{{userData.member_zt==2?'立即续费':'开通会员'}}
			</view>
	  </view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				marginTop:0,
				userData:{},
				powerList:[],
				vipData:{}
			}
		},
		created() {
			this.userData = uni.getStorageSync("userData")
			this.marginTop = uni.getMenuButtonBoundingClientRect().top
			
			this.$myRuquest('home/index/account_member').then(res=>{
				this.powerList=res.data
			})
			this.$myRuquest('home/user/member_list').then(res=>{
				this.vipData=res.data[0]
			})
		}, 
		methods: {
			submit(){
				this.$myRuquest('home/user/member_pay',{member_id:this.vipData.id}).then(res=>{
					this.payMoney(res.data)
				})
				
			},
			payMoney(data) {
					let that = this
					uni.requestPayment({
						provider: 'wxpay',
						nonceStr: data.nonceStr,
						package: data.package,
						paySign: data.paySign,
						signType: data.signType,
						timeStamp: data.timeStamp,
						success: function(res) {
							that.$refs.uToast.show({
								type: 'success',
								title: '支付成功',
								complete(){
									uni.navigateBack({
										delta:1
									})
								}
							})
			
						},
						fail: function(err) {
							that.$refs.uToast.show({
								type: 'error ',
								title: '支付失败'
							})
						}
					})
				},
			returnNav(){
				uni.navigateBack({
					delta:1
				})
			}
		}
	}
</script>

<style lang="scss">
	.content {
		background-color: #FAFAFA;
		min-height: 100vh;
    .topTitle{
    	color: #fff;
    	text-align: center;
    	font-size: 36upx;
    	position: relative;
    	display: flex;
    	padding: 10upx 20upx;
			z-index: 9;
    	.text{
    		position: absolute;
    		left: 50%;
    		transform: translateX(-50%);
    	}
    }
		.bg,
		.me_bg_light {
			position: fixed;
			top: 0;
			left: 0;
			right: 0;
			width: calc(100vw + 2upx);
			height: 490upx;
			z-index: 1;
		}

		.me_bg_light {
			height: 502upx;
			top: -150upx;
			opacity: .3;
		}

    .vip_card{
			background-image: linear-gradient(32deg,#FEF2E2,#F9CC68);
			padding: 20upx 30upx;
			border-radius: 16upx;
			position: relative;
			z-index: 9;
			// top: 80upx;
			margin: 0 40upx;
			margin-top: 80upx;
			.vip_card_bg{
				width: 288upx;
				height: 180upx;
				position: absolute;
				right: -40upx;
				top: -60upx;
			}
			.top{
				display: flex;
				justify-content: space-between;
				font-size: 24upx;
				font-weight: 700;
				align-items: center;
				color: #333333;
				.vip_title{
					display: flex;
					align-items: center;
					image{
						width: 50upx;
						height: 50upx;
						margin-right: 10upx;
					}
				}

			}
			.vip_line{
				width: 100%;
				height: 4upx;
				margin-top: 5upx;
				margin-bottom: 30upx;
				background-image: linear-gradient(to right,rgba(172, 125, 61, 0),rgba(172, 125, 61, 1),rgba(172, 125, 61, 0));
			}
			.user{
				margin-top: 50upx;
				margin-bottom: 20upx;
				display: flex;
				align-items: center;
				image{
					width: 102upx;
					height: 102upx;
					border-radius: 50%;
					margin-right: 20upx;
				}
				.text{
					display: flex;
					flex-direction: column;
					justify-content: space-between;
					flex: 1;
					.name{
						font-size: 30upx;
						color: #333333;
						font-weight: 700;
							overflow:hidden;
							text-overflow:ellipsis; 
							white-space:nowrap; 
					}
					.type{
						font-size: 24upx;
					}
				}
				.btn{
					width: 200upx;
					height: 66upx;
					background-color: #000000;
					font-size: 32upx;
					color: #FFFFFF;
					line-height: 66upx;
					text-align: center;
					border-radius: 66upx;
				}
			}
		}
	
	  .rights{
			padding: 0 40upx;
			.title{
				font-size: 32upx;
				color: #333333;
				font-weight: 700;
				margin: 20upx 0;
			}
			
			.rightsList{
				display: flex;
				flex-wrap: wrap;
				width: 100%;
				.rightsItem{
					width: calc(50% - 48upx);
					margin: 6upx 0;
					display: flex;
					align-items: center;
					font-size: 24upx;
					color: #333333;
					background-color: #F6F6F6;
					padding: 30upx 20upx;
					border-radius: 12upx;
					
					 
					image{
						width: 70upx;
						height: 56upx;
						margin-right: 10upx;
					}
				}
				>view:nth-child(2n){
					margin-left: 14upx;
				}
			}
		
		  .money{
				display: flex;
				padding: 40upx 30upx;
				align-items: center;
				justify-content: space-between;
				background-color: #FDF9EE;
				border: 2upx solid #F9CC68;
				border-radius: 16upx;
				margin-top: 20upx;
				text:nth-child(1){
					font-size: 40upx;
					color: #333333;
					font-weight: 700;
				}
				text:nth-child(2){
					font-size: 100upx;
					color: #F9963B;
				}
			}
			.btn{
				height: 90upx;
				color: #AC7D3D;
				background-color: #FED194;
				border-radius: 90upx;
				line-height: 90upx;
				text-align: center;
				margin-top: 50upx;
			}
		}
	
	}
</style>
